<template>
  <div class="container-wrap">
	  <div class="container-content-wrap">
		<div class="head">
		  	<span>渲染部署节点(登记渲染节点)</span>
			<div>
				<input type="text"  v-model="keywords" placeholder="请输入名称检索" @keydown="handleSearch"/>
			</div>
		</div>
		<div style="padding: 5px;">
			<el-table
			  :v-loading="loading"
			  :data="tableData"
			  style="width: 100%; margin-bottom: 20px"
			  row-key="id"
			>
			
			    <el-table-column type="expand">
			      <template #default="props">
			        <div >
			          <el-table :data="props.row.children" >
						<el-table-column label="序号" prop="index" />
			            <el-table-column label="productName" prop="name" />
						<el-table-column label="memoryTotal" prop="memoryTotal" />
						<el-table-column label="memoryFree" prop="memoryFree" />
						<el-table-column label="memoryUsed" prop="memoryUsed" />
						<el-table-column label="同步时间" prop="modifyTime" />
			            <el-table-column label="路数(双击切换编辑模式)" prop="limit" />
			          </el-table>
			        </div>
			      </template>
			    </el-table-column>
			
				<el-table-column prop="name" label="名称"  />
				<el-table-column prop="id" label="标识码("  />
				<el-table-column prop="ip" label="IP"  />
				<el-table-column label="GPU" >
					<template #default="scope">
						{{scope.row.cpuTotal}}核 - 当前空闲率:{{scope.row.cpuFreeUsageRate}} - 系统使用率:{{scope.row.cpuSysUsageRate}} - 用户使用率:{{scope.row.cpuFreeUsageRate}} - 当前等待率:{{scope.row.cpuWaitingUsageRate}}
					</template>
				</el-table-column>
				<el-table-column prop="gpuTotal" label="GPU总数"  />
				<el-table-column label="内存" >
					<template #default="scope">
						Total:{{scope.row.memoryTotal}}-Free:{{scope.row.memoryFree}}-Used:{{scope.row.memoryUsed}}
					</template>
				</el-table-column>
				<el-table-column label="磁盘" >
					<template #default="scope">
						Total:{{scope.row.diskTotal}}-Free:{{scope.row.diskFree}}-Usable:{{scope.row.diskUsable}}
					</template>
				</el-table-column>
				<el-table-column label="同步时间" prop="modifyTime" />
				<el-table-column align="center" label="状态">
					<template #default="scope">
						
						<el-tooltip
						  class="box-item"
						  effect="dark"
						  content="此操作影响节点接入"
						  placement="top"
						>
							<el-switch
								v-model="scope.row.status"
								inline-prompt
								active-text="正常"
								inactive-text="禁用"
								active-value="0"
								inactive-value="-1"
								@change="change(scope.row)"
							/>
						</el-tooltip>
					</template>
				</el-table-column>
				
				<el-table-column fixed="right" align="center" label="操作">
					<template #header>
						<!-- v-hasPerm="['sys:user:delete']" -->
						<el-button v-hasPerm="['admin:add']"  type="primary" plain link :icon="Plus"  @click.stop="openDialog(null,'add')">渲染节点</el-button>
					</template>
				  <template #default="scope">
					  
						<el-tooltip
						  class="box-item"
						  effect="dark"
						  content="新增子账号"
						  placement="top"
						>
							<el-button
							  v-show="scope.row.pid=='-1' && scope.row.username!='administrator' "
							  type="primary"
							  link
							  size="small"
							  @click.stop="openDialog(scope.row,'add')"
							>
							  <i-ep-plus />
							</el-button>
						</el-tooltip>
						
						<el-tooltip
						  class="box-item"
						  effect="dark"
						  content="编辑"
						  placement="top"
						>
							<el-button
							  v-show="scope.row.username!='administrator' "
							  type="primary"
							  link
							  size="small"
							  v-hasPerm="['admin:add']"
							  @click.stop="openDialog(scope.row,'edit')"
							>
							  <i-ep-edit />
							</el-button>
						</el-tooltip>
						
						<el-tooltip
						  class="box-item"
						  effect="dark"
						  content="重启"
						  placement="top"
						>
							<el-button
							  v-show="scope.row.username!='administrator' "
							  type="primary"
							  link
							  size="small"
							  @click.stop="handleRestart(scope.row)"
							>
							  <i-ep-refresh />
							</el-button>
						</el-tooltip>
						
<!-- 						<el-tooltip
						  class="box-item"
						  effect="dark"
						  content="指定用户"
						  placement="top"
						>
							<el-button
							  v-show="scope.row.username!='administrator' "
							  type="primary"
							  link
							  size="small"
							  @click.stop="accreditDialog.openDialog(scope.row)"
							>
							  <i-ep-userFilled />
							</el-button>
						</el-tooltip> -->
						
						<el-tooltip
						  class="box-item"
						  effect="dark"
						  content="删除"
						  placement="top"
						>
							<el-button
							  v-show="scope.row.username!='administrator' "
							  type="primary"
							  link
							  size="small"
							  v-hasPerm="['admin:add']"
							   @click.stop="handleDelete(scope.row)"
							  ><i-ep-delete />
							</el-button>
						</el-tooltip>
				  </template>
				</el-table-column>
			</el-table>
		</div>	
	</div>
	<el-dialog
	  v-model="dialog.visible"
	  :title="dialog.title"
	  destroy-on-close
	  append-to-body
	  width="750px"
	  @close="closeDialog"
	>
	
	
	<el-form
	  ref="userFormRef"
	  :model="userFormData"
	  :rules="userFormRules"
	  label-width="100px"
	>
		<el-form-item label="名称" prop="name">
		  <el-input v-model="userFormData.name" placeholder="请输入名称" />
		</el-form-item>
		<el-form-item label="IP" prop="ip">
		  <el-input v-model="userFormData.ip" placeholder="请输入IP" />
		</el-form-item>
	</el-form>

	<template #footer>
	  <div class="dialog-footer">
	    <el-button type="primary" @click="submitForm"  :loading="loading">确 定</el-button>
	    <el-button @click="closeDialog" :loading="loading">取 消</el-button>
	  </div>
	</template>

	</el-dialog>
	<AccreditDialog ref="accreditDialog"></AccreditDialog>
	
  </div>
</template>
<script lang="ts" setup>
	import AccreditDialog from "./components/AccreditDialog.vue";
	import { reactive, ref } from 'vue'
	import type {FormRules } from 'element-plus'
 	import {
	  Plus
	} from '@element-plus/icons-vue' 
	
	
	import { listForAgent,saveForAgent,deleteForAgent,limitForAgent,restartForAgent} from "@/api/agent";
	const tableData=ref([]);
	const keywords=ref('');
	const accreditDialog=ref();
	
	const loading = ref(false);
	const dialog = ref({
		visible:false,
		title:'',
	});
	
	const userFormRef=ref();
	
	const userFormRules=reactive<FormRules>({
	  name: [{ required: true, message: "请输入名称", trigger: "blur" }],
	  ip: [{ required: true, message: "请输入IP", trigger: "blur" }],
	});
	
	const userFormData=reactive<Object>({
		id:'',
		name:'',
		ip:'',
	})
	
	const load=()=>{
		loading.value=true;
		listForAgent({
			id:'-1',
			name:keywords.value
		})
		.then(({result}) => {
			tableData.value=result
			console.log(result);
		})
		.catch((e) => {
		})
		.finally(() => {
			loading.value=false;
		});
	}
	
	const handleSearch=(e)=>{
		if(e.keyCode == 13) {
			load();
		}
	}
	
	const openDialog=(row:object,type:string)=>{
		if('add'==type){
			dialog.value.visible=true;
			dialog.value.title='新增';
			Object.assign(userFormData, {pid:row?row.id:'-1'});
		}else{
			dialog.value.visible=true;
			dialog.value.title='编辑';
			Object.assign(userFormData, row);
		}
	}
	
	const handleDelete=(row :object)=>{
		ElMessageBox.confirm("确认删除["+row.name+"]吗?", "警告", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning",
		})
		  .then(() => {
			  loading.value=true;
			  deleteForAgent({
			  	id:row.id
			  })
			  .then(() => {
				load();
				ElMessage.success("删除成功");
			  })
			  .catch((e) => {
			  })
			  .finally(() => {
			  	loading.value=false;
			  });
		  })
		  .catch(() => ElMessage.info("已取消删除"));
	}
	
	const submitForm=()=>{
		userFormRef.value.validate((isValid: boolean) => {
		  if (isValid) {
				loading.value=true;
				saveForAgent(userFormData)
				.then((res) => {
					load();
					ElMessage.success(res.message);
					closeDialog();
				})
				.catch((e) => {
				})
				.finally(() => {
					loading.value=false;
				});
		  }
		});
	}
	
	const change=(row:{id:string,status:string})=>{
		loading.value=true;
		saveForAgent({
			id:row.id,
			status:row.status
		})
		.then((res) => {
			ElMessage.success(res.message);
		})
		.catch((e) => {
		})
		.finally(() => {
			loading.value=false;
		});
	}
	
	//显卡路数限制
	const handleLimit=(row:{id:string,limit:number})=>{
		loading.value=true;
		limitForAgent({
			id:row.id,
			limit:row.limit
		})
		.then((res) => {
			ElMessage.success(res.message);
		})
		.catch((e) => {
		})
		.finally(() => {
			loading.value=false;
		});
	}
	
	const handleRestart=(row :{id:string})=>{
		ElMessageBox.confirm("确认重启渲染节点吗?", "警告", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning",
		})
		  .then(() => {
			  loading.value=true;
			  restartForAgent({
			  	id:row.id
			  })
			  .then(() => {
				ElMessage.success("成功");
			  })
			  .catch((e) => {
			  })
			  .finally(() => {
			  	loading.value=false;
			  });
		  })
		  .catch(() => ElMessage.info("已取消"));
	}
	
	
	const closeDialog=()=>{
		dialog.value.visible=false;
		dialog.value.title="";
		resetForm();
	}
	
	/**
	 * 重置表单
	 */
	function resetForm() {
	  userFormRef.value.resetFields();
	  userFormRef.value.clearValidate();
	
	  userFormData.id = "";
	  userFormData.ip = "";
	  userFormData.name= "";
	}
	
	onMounted(() => {
		load();
	});
	
	
</script>
<style scoped>
	
	.container-wrap{
		position: relative;
		height: 100%;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction:row ;
		flex-direction: row;
		border-top: 1px solid #515664;
		
		.container-left-wrap{
			width: 250px;
			height: 100%;;
			color: #fff;
			position: relative;
			background-color: #2b2c2f;
			border-right: 1px solid #4d505e;
			>.nav-head{
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: justify;
				-ms-flex-pack: justify;
				justify-content: space-between;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				width: 100%;
				height: 34px;
				background-color: #36373a;
				border-bottom: 1px solid #18181b;
				color: #ccc;
				font-size: 14px;
				>span{
					border-left-width: 3px!important;
					padding-left: 8px!important;
					height: 16px;
					line-height: 17px;
					font-size: 13px;
					color: #ccc;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					white-space: nowrap;
					border-left: 2px solid #0080ff;
					margin-left: 8px;
					padding-left: 3px;
				}
				>div{
					float: right;
					margin-top: -1px;
					>button{
					   width: 1.4375rem;
					   height: 1.875rem;
					   margin-right: 0.3125rem;
					   background: transparent;
					   color: #ccc;
					   font-size: 16px;
					   margin-top: 3px;
					   cursor: pointer;
					}
				}
			}
		}
		
		
		>.container-content-wrap{
			flex: 1;
			width: 100%;
			
			>.head{
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: justify;
				-ms-flex-pack: justify;
				justify-content: space-between;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				width: 100%;
				height: 34px;
				background-color: #36373a;
				border-bottom: 1px solid #18181b;
				color: #ccc;
				font-size: 14px;
				>span{
					border-left-width: 3px!important;
					padding-left: 8px!important;
					height: 16px;
					line-height: 17px;
					font-size: 13px;
					color: #ccc;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					white-space: nowrap;
					border-left: 2px solid #0080ff;
					margin-left: 8px;
					padding-left: 3px;
				}
				>div{
					float: right;
					margin-top: -1px;
					padding-right: 0.625rem;
					>button{
					   width: 1.4375rem;
					   height: 1.875rem;
					   margin-right: 0.3125rem;
					   background: transparent;
					   color: #ccc;
					   font-size: 16px;
					   margin-top: 3px;
					   cursor: pointer;
					}
					>input[type=text]{
						background: #1f2632;
						border: 1px solid #4d505e;
						border-radius: 0.9375rem;
						outline-style: none ;
						caret-color:#0080ff;
						height: 1.625rem;
						color: #ccc;
						width: 17.5rem;
						padding-left: 1.125rem;
						padding-right: 1.125rem;
						background-image: url('/src/assets/icons/search.svg');
						
						background-size: 1.375rem;
						background-repeat: no-repeat;
						background-position-y: center;
						background-position-x: 15.625rem;
					}
					>input[type=text]:focus {
						border: 0px solid #0080ff;
					}
				}
			}
			
			>ul{
				>li{
					float: left;
					list-style:none;
					width: 270px;
					margin: 15px 30px 40px;
					-webkit-box-flex: 0;
					-ms-flex: 0 270px;
					flex: 0 270px;
					height: 199px;
					border: 1px solid #606475;
					cursor: pointer;
					position: relative;
					
					>.create{
						height: 100%;
						width: 100%;
						display: -webkit-box;
						display: -ms-flexbox;
						display: flex;
						-webkit-box-pack: justify;
						-ms-flex-pack: justify;
						justify-content: space-around;
						-webkit-box-align: center;
						-ms-flex-align: center;
						align-items: center;
						background: -webkit-gradient(linear,left top,left bottom,from(#36393f),to(#27292e));
						background: linear-gradient(180deg,#36393f,#27292e); 
						cursor: pointer;
						>.el-icon{
							font-size: 60px;
							font-weight: bold;
						}
					}
					
					>.top{
						margin: 5px;
						border: 1px solid #606475;
						background: #121d2e;
						position: relative;
						height: 162px !important;
						width: 258px !important;
						>.img-mask{
							width: 100%;
							height: 100%;
							background: rgba(17,28,43,.95);
							position: absolute;
							left: 0;
							top: 0;
							height: 160px !important;
							width: 256px !important;
							display: none;
							
							>.opear{
								width: 100%;
								height: 60px;
								position: absolute;
								left: 0;
								right: 0;
								bottom: 0;
								top: 0px;
								margin: auto;
								display: -webkit-box;
								display: -ms-flexbox;
								display: flex;
								-webkit-box-orient: vertical;
								-webkit-box-direction: normal;
								-ms-flex-direction: column;
								flex-direction: column;
								-webkit-box-align: center;
								-ms-flex-align: center;
								align-items: center;
								>p{
									width: 112px;
									height: 24px;
									border-radius: 2px;
									background: rgba(27,102,240,.8);
									color: rgba(255, 255, 255, 0.8);
									font-size: 12px;
									text-align: center;
									line-height: 24px;
									float: none;
									margin: 0 auto;
									cursor: pointer;
								}
								>p:hover{
									background: rgba(27,102,240,1);
									color: rgba(255, 255, 255, 1);
								}
								>.menu-col-group{
									margin-top: 8px;
									width: 200px;
									-webkit-box-pack: center;
									-ms-flex-pack: center;
									justify-content: center;
									display: -webkit-box;
									display: -ms-flexbox;
									display: flex;
									-webkit-box-orient: horizontal;
									-webkit-box-direction: normal;
									-ms-flex-direction: row;
									flex-direction: row;
									-ms-flex-wrap: wrap;
									flex-wrap: wrap;
									>.menu-col{
									  position: relative;
									  display: -webkit-box;
									  display: -ms-flexbox;
									  display: flex;
									  -webkit-box-orient: vertical;
									  -webkit-box-direction: normal;
									  -ms-flex-direction: column;
									  flex-direction: column;
									  -webkit-box-align: center;
									  -ms-flex-align: center;
									  align-items: center;
									  cursor: pointer;
									  margin: 0 3px 5px;
									  >.icon{
									    font-size: 16px;
									    color: #a5b0cc;
									  }
									  >.hidden{
										border: 1px solid #0080ff;
										padding: 3px;
										width: 35px;
										position: absolute;
										top: 25px;
										color: #fff;
										display: none;
										font-size: 12px;
										text-align: center;
										z-index: 36;
										background: rgba(17,28,43,.95);
									  }
									}
									>.menu-col:hover{
										>.icon{
										  color: #0080ff;
										}
										>.hidden{
											display: block;
										}
									}
								}
							}
						}
						>img{
							height: 160px !important;
							width: 256px !important;
							-o-object-fit: cover;
							object-fit: cover;
							position: absolute;
						}
					}
					.bottom{
						
						display: -webkit-box;
						display: -ms-flexbox;
						display: flex;
						-webkit-box-pack: justify;
						-ms-flex-pack: justify;
						justify-content: space-around;
						-webkit-box-align: center;
						-ms-flex-align: center;
						align-items: center;
					}
					.time{
					    display: -webkit-box;
					    display: -ms-flexbox;
					    display: flex;
					    -webkit-box-pack: justify;
					    -ms-flex-pack: justify;
					    justify-content: space-between;
					    margin-top: 5px;
					    color: #aaa;
					    font-size: 12px;
					    height: 24px;
					    line-height: 24px;
					}
					
				}
				>li:hover{
					border: 1px solid rgb(0, 128, 255);
					>.top>.img-mask{
						display: block;
					}
				}
			}
			
		}
	}
	/deep/ .el-table__body-wrapper tr td.el-table-fixed-column--left, .el-table__body-wrapper tr td.el-table-fixed-column--right, .el-table__body-wrapper tr th.el-table-fixed-column--left, .el-table__body-wrapper tr th.el-table-fixed-column--right, .el-table__footer-wrapper tr td.el-table-fixed-column--left, .el-table__footer-wrapper tr td.el-table-fixed-column--right, .el-table__footer-wrapper tr th.el-table-fixed-column--left, .el-table__footer-wrapper tr th.el-table-fixed-column--right, .el-table__header-wrapper tr td.el-table-fixed-column--left, .el-table__header-wrapper tr td.el-table-fixed-column--right, .el-table__header-wrapper tr th.el-table-fixed-column--left, .el-table__header-wrapper tr th.el-table-fixed-column--right {
	    background: #606475;
	}
	
	/deep/ .el-table__body-wrapper tr td.el-table-fixed-column--right, .el-table__body-wrapper tr th.el-table-fixed-column--left, .el-table__body-wrapper tr th.el-table-fixed-column--right, .el-table__footer-wrapper tr td.el-table-fixed-column--left, .el-table__footer-wrapper tr td.el-table-fixed-column--right, .el-table__footer-wrapper tr th.el-table-fixed-column--left, .el-table__footer-wrapper tr th.el-table-fixed-column--right, .el-table__header-wrapper tr td.el-table-fixed-column--left, .el-table__header-wrapper tr td.el-table-fixed-column--right, .el-table__header-wrapper tr th.el-table-fixed-column--left, .el-table__header-wrapper tr th.el-table-fixed-column--right {
	    background: #606475;
	}
	
	/deep/ .el-table__body-wrapper tr th.el-table-fixed-column--left, .el-table__body-wrapper tr th.el-table-fixed-column--right, .el-table__footer-wrapper tr td.el-table-fixed-column--left, .el-table__footer-wrapper tr td.el-table-fixed-column--right, .el-table__footer-wrapper tr th.el-table-fixed-column--left, .el-table__footer-wrapper tr th.el-table-fixed-column--right, .el-table__header-wrapper tr td.el-table-fixed-column--left, .el-table__header-wrapper tr td.el-table-fixed-column--right {
	    background: #606475;
	}
	
	/deep/ .el-table__header-wrapper tr th.el-table-fixed-column--left{
		 background-color: #3d3d41;
	}
	
	/deep/ .el-table__header-wrapper tr th.el-table-fixed-column--right{
		background: #1f2021;
	}
	
	/deep/ .el-table__body-wrapper tr td.el-table-fixed-column--right, .el-table__body-wrapper tr th.el-table-fixed-column--left[data-v-c23973b1], .el-table__body-wrapper tr th.el-table-fixed-column--right[data-v-c23973b1], .el-table__footer-wrapper tr td.el-table-fixed-column--left[data-v-c23973b1], .el-table__footer-wrapper tr td.el-table-fixed-column--right[data-v-c23973b1], .el-table__footer-wrapper tr th.el-table-fixed-column--left[data-v-c23973b1], .el-table__footer-wrapper tr th.el-table-fixed-column--right[data-v-c23973b1], .el-table__header-wrapper tr td.el-table-fixed-column--left[data-v-c23973b1], .el-table__header-wrapper tr td.el-table-fixed-column--right[data-v-c23973b1], .el-table__header-wrapper tr th.el-table-fixed-column--left[data-v-c23973b1], .el-table__header-wrapper tr th.el-table-fixed-column--right[data-v-c23973b1] {
	    background: #3d3d41;
	}
	
	/deep/ .el-table__inner-wrapper::before {
	    /* background-color: var(--el-table-border-color); */
		background-color:transparent;
	}
	
	/deep/ .el-table {
	    color: #ccc;
	}
	
	/deep/ .el-table th.el-table__cell{
	    background-color: #1f2021;
	}
	
	/deep/ .el-table thead {
	    font-weight: 500;
	}
	
	/deep/ .el-table tr {
	    background-color: #3d3d41;
	}
	
	/deep/.el-table th.el-table__cell.is-leaf {
	    /* border-bottom: var(--el-table-border); */
		border-bottom:  1px solid #606475;
	}
	
	/deep/.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
	    border-bottom:  1px solid #606475;
	}
	
	/* .el-table__body tr.hover-row.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped.current-row>td.el-table__cell, .el-table__body tr.hover-row.el-table__row--striped>td.el-table__cell, */
	/deep/.el-table__body tr.hover-row>td.el-table__cell{
		 background-color: #18222c;
	}
	
	/deep/.el-table__empty-text {
	    color: #ccc;
	}
	
	/deep/.el-table__empty-block {
	    background: #3d3d41;
	}
	
	/deep/ .el-table__expanded-cell {
	   background: #3d3d41;
	}
	
</style>